<template>
	<div class="goodsInfo">

		<!-- 小球 -->
		<transition @befor-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
			<div class="ball" v-if="flag" ref="ball"></div>
		</transition>
		<!-- 图片轮播图 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swipe :Lubotu="Lubotu"></swipe>
				</div>
			</div>
		</div>

		<!-- 图片购买 -->
		<div class="mui-card" v-for="item in info" :key="item.id">
			<div class="mui-card-header">{{item.title}}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>
						<del>市场价:￥{{item.market_price}}</del>
						<span class="sell">销售价:￥{{item.sell_price}}</span>
					</p>
					<p>购买数量:&nbsp;<number @getCount="getCount" :max="item.stock_quantity"></number>
					</p>
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click="move">加入购物车</mt-button>
				</div>
			</div>
		</div>

		<!-- 图片详情 -->
		<div class="mui-card" v-for="(item,i) in info" :key="i">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号:&nbsp;{{item.goods_no}}</p>
					<p>库存情况:&nbsp;{{item.stock_quantity}}</p>
					<p>上架时间:&nbsp;{{item.add_time | dataFormat}}</p>
				</div>
			</div>
			<hr>
			<div class="mui-card-content-inner">
				<div class="btn">
					<mt-button type="primary" size="large" @click="getDesc" plain>图文介绍</mt-button>

				</div>
				<div class="btn">
					<mt-button type="danger" size="large" @click="getComment" plain>商品讨论</mt-button>

				</div>
			</div>
		</div>



	</div>
</template>

<script>
	//导入轮播图组件
	import swipe from '../subcomponent/swipe.vue'
	//导入numberbox
	import number from '../subcomponent/goods_number.vue'
	export default {
		data() {
			return {
				id: this.$route.params.id,
				Lubotu: [],
				info: [],
				flag: false,
				count: 1
			}
		},
		created() {
			this.getLubotu()
			this.getInfo()
		},
		methods: {
			getLubotu() {
				this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.id).then(data => {
					data.body.message.forEach(item => {
						item.img = item.src
					})
					this.Lubotu = data.body.message
				})
			},
			getInfo() {
				this.$http.get('http://www.liulongbin.top:3005/api/goods/getinfo/' + this.id).then(data => {
					this.info = data.body.message
				})
			},
			getDesc() {
				this.$router.push('/home/goodsDesc/' + this.id)
			},
			getComment() {
				this.$router.push('/home/goodsComment/' + this.id)
			},
			move() {
				this.flag = !this.flag
				var goodsinfo = {
					id: this.id,
					price: this.info[0].sell_price,
					count: parseInt(this.count),
					flag: true
				}
				this.$store.commit('addToCar',goodsinfo)
			},
			beforeEnter(el) {
				el.style.transform = "translate(0, 0)";
			},
			enter(el, done) {
				el.offsetWidth;
				const ballPosition = this.$refs.ball.getBoundingClientRect();
				// 获取 徽标 在页面中的位置
				const badgePosition = document
					.getElementById("badge")
					.getBoundingClientRect();

				const xDist = badgePosition.left - ballPosition.left;
				const yDist = badgePosition.top - ballPosition.top;

				el.style.transform = `translate(${xDist}px, ${yDist}px)`;
				el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
				done();
			},
			afterEnter() {
				this.flag = !this.flag
			},
			getCount(count) {
				this.count = count
				// console.log(this.count + '-----------')
			}


		},
		components: {
			swipe,
			number
		}
	}
</script>

<style scoped="scoped">
	.goodsInfo {
		background-color: #EEEEEE;
		overflow: hidden;
	}

	.sell {
		font-size: 15px;
		font-weight: bold;
		color: red;
		margin-left: 10px;
	}

	hr {
		width: 1024px;
		height: 1px;
		background-color: #EEEEEE;
		border: 0.5px none #000000;
	}

	.btn {
		margin: 20px 5px;
	}

	.ball {
		width: 15px;
		height: 15px;
		background-color: red;
		border-radius: 50%;
		top: 407px;
		left: 143px;
		position: absolute;
		z-index: 99;

	}
</style>
